<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow, onLoad, onReady } from '@dcloudio/uni-app'
import DateRangePicker from '@/pagesMember/valuecenter/components/DateRangePicker.vue'
import type { ZyAccountLogDTO, AccountLogPageParam } from '@/types/valuecenter'
import type { PageParams } from '@/types/global'
import { useMemberStore } from '@/stores'
import { getDictLabel, getDictAllData } from '@/services/dict'
import { accountLogAppPageAPI } from '@/services/valuecenter'
import { getStartDateAndEndStr } from '@/utils/http'
const { getUserInfo } = useMemberStore()
const systemInfo = uni.getSystemInfoSync()
const { safeAreaInsets, windowHeight, screenWidth } = systemInfo

const initParams: PageParams = {
  page: 1,
  limit: 10,
}
const dateRangeOptionVal = ref('最近10天')

const params = ref({
  bizType: null,
  userId: getUserInfo()?.id,
  ...initParams,
  ...getStartDateAndEndStr(dateRangeOptionVal.value),
} as AccountLogPageParam)

const noMore = ref(false)
const total = ref(0)
const finish = ref(false)
const pointsSourceTypeData = ref([] as any[])

const lists = ref([] as ZyAccountLogDTO[])

const onDateRangeChange = async (data: any) => {
  console.log('DateRangePicker 返回:', data)
  lists.value = []
  params.value = {
    ...params.value,
    ...initParams,
    startDate: data.startDate,
    endDate: data.endDate,
  }
  await request()
}

onLoad(async () => {
  pointsSourceTypeData.value = await getDictAllData('points_source_type')

  uni.startPullDownRefresh()
  await request()
})

const request = async () => {
  if (finish.value === true) {
    return
  }

  finish.value = true
  const res = await accountLogAppPageAPI(params.value)
  lists.value = [...lists.value, ...res.data.list]
  total.value = res.data.total
  finish.value = false
}

// 滚动触底
const onScrolltolower = async () => {
  if (finish.value === true) {
    return
  }
  if (lists.value.length < total.value) {
    params.value.page = params.value.page + 1
  } else {
    noMore.value = true
    return
  }
  await request()
}

const triggered = ref(false) // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发

const onPulling = (e: any) => {
  if (e.detail.deltaY < 50) return // 防止上滑页面也触发下拉
  triggered.value = true
}
// 自定义下拉刷新被复位
const onRestore = () => {
  triggered.value = false
}
// 自定义下拉刷新被中止
const onAbort = () => {
  console.error('onAbort')
}

// 自定义下拉刷新被触发
const onRefresh = async () => {
  lists.value = []
  params.value = {
    ...params.value,
    ...initParams,
  }
  await request()
  triggered.value = false
}
</script>

<template>
  <view class="record-page" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
    <date-range-picker :dateRangeOptionVal="dateRangeOptionVal" @change="onDateRangeChange" />
    <scroll-view
      class="list"
      :scroll-y="true"
      :show-scrollbar="false"
      @scrolltolower="onScrolltolower"
      :refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="100"
      refresher-background="#F5F5F7"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
      enable-back-to-top
    >
      <view class="item" v-for="(item, index) in lists" :key="index">
        <view class="left" :class="{ up: item.changeType !== 0 }">
          <text v-if="item.changeType === 0" class="iconfont icon-arrow-circle-down"></text>
          <text v-else class="iconfont icon-arrow-circle-down"></text>
        </view>
        <view class="center">
          <view class="title">{{ item.remark }}</view>
          <view class="desc">{{ item.createDate }}</view>
        </view>
        <view class="right">
          <view class="price" :class="{ priceup: item.changeType !== 0 }"
            >{{ item.changeType === 0 ? '-' : '+' }}{{ item.amount }}</view
          >
          <view class="status"></view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';

page {
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}

.record-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  .list {
    .item {
      display: flex;
      align-items: center;
      padding: 24rpx;
      border-bottom: 1px solid #f3f4f6;
      background-color: #fff;

      .left {
        margin-right: 20rpx;
        &.up {
          transform: rotate(180deg);
          .icon-arrow-circle-down {
            color: #ff9500;
          }
        }

        .icon-arrow-circle-down {
          color: #1677ff;
        }
      }

      .center {
        flex: 1;
        display: flex;
        flex-direction: column;

        .title {
          font-size: 28rpx;
          color: #000000;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .desc {
          margin-top: 20rpx;
          font-size: 24rpx;
          color: #6b7280;
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        .price {
          font-size: 28rpx;
          color: #1677ff;
          &.priceup {
            color: #ff9500;
          }
        }

        .status {
          margin-top: 20rpx;
          font-size: 24rpx;
          color: #22c55e;
        }
      }
    }
  }
}
</style>
